<template>
  <section id="Test" class="clearfix">
    <div class="desc">
      <h3 class="title">检测服务</h3>

      <ul class="desc-content">
        <li>专业检测机构入驻</li>
        <li>线上提交检验需求</li>
        <li>快速获取检测报告</li>
        <li>线上线下护航交易</li>
      </ul>
    </div>

    <div class="test-content">
      <header class="header">
        <h4 class="title">合作机构</h4>
        <div class="actions text-right">
          <nuxt-link :to="{path: '/testService'}" target="_blank" class="text-ligingray">更多</nuxt-link>
        </div>
      </header>

      <div class="clearfix">
        <dl class="service-item" v-for="item in data" :key="item.picturePath">
          <dt class="img-box"><img v-lazyload.cdn="item.picturePath" :alt="item.name"></dt>
          <dd class="title">{{ item.name }}</dd>
          <dd class="btn"><a :href="item.path" target="_blank" class="el-button el-button--primary el-button--small is-plain">查看详情</a></dd>
        </dl>
      </div>
    </div>
  </section>
</template>

<script>
  import platform from '~/config/platform'

  export default {
    props: {
      data: {
        type: Array,
        require: true
      }
    },
    data () {
      return {
        platform
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>

  .desc {
    width: 220px;
    border-right: 1px solid #dedede;
    background-color: #f4f2ef; //rgba(255,255,255,.5);
    float: left;
    padding: 83px 22px 16px;
    position: relative;
    height: 263px;

    .title {
      position: absolute;
      height: 38px;
      line-height: 38px;
      font-size: 24px;
      color: #fff;
      width: 148px;
      font-weight: normal;
      top: 28px;
      border-radius: 2px;
      left: -1px;
      text-align: center;
      background-color: #e8af68;
    }

    .desc-content {
      color: #6e6e6e;
      line-height: 30px;
    }
  }

  .header {

  }

  .test-content {
    float: left;
    width: 968px;
    .header {
      display: table;
      table-layout: fixed;
      width: 100%;
      border-bottom: 1px solid #dedede;
      padding: 12px 20px;
      background-color: #f5f5f5;

      .title {
        font-weight: normal;
        color: #3e3e3e;
        font-size: 14px;
      }

      .title, .actions {
        display: table-cell;
      }
    }

    .service-item {
      float: left;
      width: 33.33333%;
      text-align: center;
      padding: 38px 33px 20px;
      height: 218px;

      .img-box{
        width: 190px;
        height: 95px;
        display: block;
        margin: 0 auto;
        background-color: pink;
        overflow: hidden;
      }

      img{
        width: 190px;
        height: 95px;
      }

      .btn{
        display: none;
      }

      &:hover{
        .btn{
          display: block;
        }
      }

      .title{
        padding: 6px 0 12px;
      }

      & + .service-item {
        border-left: 1px solid #dedede;
      }
    }
  }

</style>
